<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-01 14:57:52
 * @LastEditTime: 2023-07-11 13:45:34
 * @FilePath: \myblog\src\components\user\UserAvatar.vue
-->
<template>
  <div class="blog-avator">
    <el-image class="blog-avator--pic" :src="src">
    </el-image>
    <svg @click="logout" class="blog-logout" t="1689051734793" viewBox="0 0 1042 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2037" width="200" height="200"><path d="M581.632 697.344l126.976 0 0 194.56q0 33.792-10.24 58.88t-27.136 40.96-39.424 23.552-48.128 7.68l-452.608 0q-24.576 0-48.128-9.728t-41.472-27.136-29.184-40.96-11.264-52.224l0-706.56q0-24.576 11.776-47.104t30.208-39.936 40.96-28.16 45.056-10.752l449.536 0q26.624 0 50.176 11.776t41.472 29.696 28.16 40.448 10.24 44.032l0 188.416-126.976 0 1.024-195.584-452.608 0-1.024 713.728 452.608 0 0-195.584zM1021.952 505.856q37.888 30.72 2.048 60.416-20.48 15.36-44.544 37.888t-50.176 46.592-51.712 47.616-47.104 40.96q-23.552 18.432-40.448 18.432t-16.896-24.576q2.048-14.336 0.512-35.84t-1.536-36.864q0-17.408-12.288-21.504t-29.696-4.096l-40.96 0-62.464 0q-34.816 0-73.216-0.512t-73.216-0.512l-62.464 0-41.984 0q-8.192 0-17.92-1.536t-17.408-6.656-12.288-14.336-4.608-23.552q0-19.456-0.512-46.08t0.512-47.104q0-27.648 13.312-37.888t43.008-9.216l33.792 0 59.392 0q32.768 0 70.144 0.512t71.168 0.512l61.44 0 38.912 0q25.6 1.024 43.52-4.096t17.92-22.528q0-14.336 1.024-32.256t1.024-32.256q0-23.552 12.8-29.696t32.256 9.216q19.456 16.384 45.568 38.4t52.736 45.056 52.736 45.568 47.616 39.936z" p-id="2038"></path></svg>
  </div>
</template>

<script>
export default {
  components:{},
  data(){
    return {
    }
  },
created(){},
mounted(){},
watch:{},
computed:{
  src() {
    return this.$store.state.userInfo.avatar
  }
},
methods:{
  logout() {
    this.$store.dispatch('logout')
  }
},
}
</script>
<style lang="scss" scoped>
.blog-avator {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 100px;
  .blog-avator--pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 30px;
  }
  .blog-logout {
    width: 25px;
    height: 25px;
    cursor: pointer;
    transition: .2s;
  }
  .blog-logout:hover {
    transform: scale(1.25)
  }
}
</style>